<!--
 * @Author: zhangxiangsheng 1026583651@qq.com
 * @Date: 2024-06-19 18:54:07
 * @LastEditors: zhangxiangsheng 1026583651@qq.com
 * @LastEditTime: 2024-06-26 16:12:41
 * @FilePath: \appGly\pages\index\wdcdz\wdcdz.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <view class="">
    <u-navbar title="我的充电桩"></u-navbar>
    <view class="list">
      <view
        class="item"
        v-for="(item, key) in list"
        :key="key"
        @click="itemtap(item)"
      >
        <view class="iconfont" :class="[item.icon]"></view>
        <view class="label">
          {{ item.label }}
        </view>
        <view class="label" v-if="item.value">
          {{ item.value }}
        </view>
        <view v-else class="icon">
          <u-icon name="arrow-right" size="20" color="#969696"></u-icon>
        </view>
      </view>
    </view>
    <cdzxq ref="cdzxq"></cdzxq>
  </view>
</template>
<script>
  import cdzxq from "./components/cdzxq";
  export default {
    components: {
      cdzxq,
    },
    data() {
      return {
        Station: [],
        ChargeCarSearch: [],
      };
    },
    created() {
      this.init();
    },
    computed: {
      list() {
        let t = this.$z.timefn.getdateTime();
        let gztCounts = this.ChargeCarSearch.reduce(
          (acc, e) => {
            if ([0, 1, 9].includes(Number(e.gzt))) {
              acc[e.gzt].num = acc[e.gzt].num + 1;
              acc[e.gzt].data.push(e);
            }
            if (e.type == 0) {
              acc.type0.num = acc.type0.num + 1;
              acc.type0.data.push(e);
            } else {
              acc.type1.num = acc.type1.num + 1;
              acc.type1.data.push(e);
            }
            let et = this.$z.timefn.getdateTime(e.sjc);
            let t2 = t - et;
            if (t2 < 24 * 60 * 60 * 1000) {
              acc.t1.num = acc.t1.num + 1;
              acc.t1.data.push(e);
            }
            if (t2 < 30 * 24 * 60 * 60 * 1000) {
              acc.t2.num = acc.t2.num + 1;
              acc.t2.data.push(e);
            }
            // console.log(acc);
            return acc;
          },
          {
            t1: { num: 0, data: [] },
            type0: { num: 0, data: [] },
            type1: { num: 0, data: [] },
            t2: { num: 0, data: [] },
            0: { num: 0, data: [] },
            1: { num: 0, data: [] },
            9: { num: 0, data: [] },
          }
        );
        // console.log(gztCounts, "gztCounts");
        let r = [
          {
            label: `充电桩总数：${this.ChargeCarSearch.length}`,
            icon: "iconzongshu",
            data: this.ChargeCarSearch,
          },
          {
            label: `在线设备：${gztCounts["1"].num}`,
            icon: "iconzaixian",
            data: gztCounts["1"].data,
          },
          {
            label: `离线设备：${gztCounts["0"].num}`,
            icon: "iconlixian1",
            data: gztCounts["0"].data,
          },
          {
            label: `未上线设备：${gztCounts["9"].num}`,
            icon: "iconweishangxian",
            data: gztCounts["9"].data,
          },
          {
            label: `今日新增：${gztCounts["t1"].num}`,
            icon: "iconjinri",
            data: gztCounts["t1"].data,
          },
          {
            label: `本月新增：${gztCounts["t2"].num}`,
            icon: "iconbenyue",
            data: gztCounts["t2"].data,
          },
          {
            label: `免费充电桩：${gztCounts["type0"].num}`,
            icon: "iconmianfei",
            data: gztCounts["type0"].data,
          },
          {
            label: `收费充电桩：${gztCounts["type1"].num}`,
            icon: "iconshoufei1",
            data: gztCounts["type1"].data,
          },
        ];
        return r;
      },
    },
    methods: {
      async init() {
        let Station = await this.$z.request("/Station");
        // this.Station = Station;
        let ChargeCarSearch = await this.$z.request("/ChargeCarSearch");
        this.Station = Station;
        this.ChargeCarSearch = ChargeCarSearch;
        // console.log(Station, ChargeCarSearch, "Station");
      },
      pcsChargeCarfn(Station, e) {
        var sum = e.chargecarSum;
        function pcssumfn(data, element) {
          for (var i = 0; i < data.length; i++) {
            if (data[i].pid == element.id) {
              sum += data[i].chargecarSum;
              pcssumfn(data, data[i]);
            }
          }
        }
        pcssumfn(Station, e);
        return sum;
      },
      // pcsChargeCarfn(Station, e) {
      //   return Station.reduce((sum, item) => {
      //     if (item.pid === e.id) {
      //       return sum + item.chargecarSum;
      //     }
      //     return sum;
      //   }, e.chargecarSum);
      // },

      itemtap(item) {
        let station = this.Station;
        let chargecar = item.data;
        station = station.map((element) => {
          let pcsChargecar = chargecar.filter((e) => e.pcs == element.id);
          return {
            ...element,
            chargecarSum: pcsChargecar.length,
            chargecardata: pcsChargecar,
          };
        });
        station.forEach((element) => {
          element.chargecarSumz = this.pcsChargeCarfn(station, element);
        });
        this.$refs.cdzxq.btntap(station);
        console.log(station);
      },
      //
      // console.log(item, "item");
    },
  };
</script>
<style lang="scss" scoped>
  .Stationaddbtn {
    margin: 20rpx;
    background: #fff;
    height: 88rpx;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .iconfont {
      margin-right: 8rpx;
    }
  }
  .scroll-Y {
    height: 100%;
  }
  .list {
    .item {
      height: 104rpx;
      display: flex;
      background-color: #fff;
      align-items: center;
      position: relative;
      .iconfont {
        width: 100rpx;
        height: 100rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 50rpx;
        color: #2093f5;
      }
      .label {
        // width: 260rpx;
        // padding-left: 30rpx;
        font-size: 32rpx;
      }
      .icon {
        position: absolute;
        right: 30rpx;
      }
      &::after {
        content: "";
        height: 2rpx;
        position: absolute;
        left: 30rpx;
        bottom: 0;
        right: 0;
        background-color: #cfcfcf;
        transform: scaleY(0.5);
      }
      &.noafter {
        &::after {
          display: none;
        }
      }
    }
  }
</style>
